<template>
	<view class="new_page">
		<view class="main">
			<view class="form_wrap">
				<uni-forms :modelValue="formData">
					<view class="div_box">
						<uni-forms-item label="头像">
							<view class="avatar_wrap">
								<button class="btn_init" open-type="chooseAvatar" @chooseavatar="chooseavatar">
									<text v-if="!formData.imageUrl">获取头像</text>
									<view class="avatar" v-else>
										<image :src="formData.imageUrl" mode="widthFix"></image>
									</view> 
								</button>
							</view>
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="真实姓名">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="text"
							 v-model="formData.name" placeholder="输入..." />
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="职称">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="text" 
							v-model="formData.title" placeholder="输入..." />
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="工作年限">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="text" 
							v-model="formData.workingYears" placeholder="输入..." />
						</uni-forms-item>
					</view>
				
					
					<view class="div_box">
						<uni-forms-item label="学历">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="text" 
							v-model="formData.aptitude" placeholder="输入..." />
						</uni-forms-item>
					</view>
					
					<view class="div_box">
						<uni-forms-item label="个人简介">
							<my-editor v-model="formData.personalDescription"></my-editor>
							<!-- <textarea class="textarea" v-model="formData.personalDescription" placeholder="输入..."></textarea> -->
							<!-- <uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="text" 
							v-model="formData.personalDescription" placeholder="输入..." /> -->
						</uni-forms-item>
					</view>
					
					
			
					<view class="div_box">
						<uni-forms-item label="擅长项目">
							<!-- <my-editor v-model="formData.expertIn"></my-editor> -->
							<textarea class="textarea" v-model="formData.expertIn" placeholder="输入..."></textarea>
							<!-- <uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false"
							 type="text" v-model="formData.expertIn" placeholder="输入..." /> -->
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="排序">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="number" 
							v-model="formData.displayOrder" placeholder="输入..." />
						</uni-forms-item>
					</view>
									
				</uni-forms>
			</view>
			<view class="fix_btn">
			  <button
			    :class="['btn-r', isActive ? 'b-bg' : 'b-grey-bg']"
			    @click="submit"
			  >
					提交
			  </button>
			</view>
		</view>
	</view>
</template>

<script>
	import { upLoadImg,addjsList } from '@/request/api.js'
	import { toast,useRouter } from '@/request/utils.js'
	export default {
		data() {
			return {
				isActive: false,
				placeholderStyle: "font-size: 29rpx;text-align:right",
				formData: {
					name: '',
					imageUrl: '',
					title: '',
					workingYears: '',
					expertIn: '',
					personalDescription: '',
					aptitude:'',
					displayOrder:''
				},
			}
		},
		watch: {
		  formData: {
		    handler: function (newValue, oldValue) {
		      let arr = Object.values(this.formData);
		      let bol = arr.every((item) => {
		        return typeof item != "object" ? !!item : item.length>0;
		      });
		      this.isActive = bol;
		    },
		    deep: true,
		  },
		},
		onLoad() {

		},
		methods: {
			async updates(path){
				let res = await upLoadImg(path, 'image');
				this.formData.imageUrl = res.data
			},
			chooseavatar(e){
				console.log(e)
				// this.updates(e.detail.avatarUrl);
				this.formData.imageUrl = e.detail.avatarUrl;
			},
			// 提交
			async submit(){
				if(!this.isActive){return}
				let data = this.formData
				let res = await addjsList(data);
				if(res.code==200){
						toast('添加成功')
						this.goToNoLoginPage('/pagesA/technician/technician','navigateTo');
				}else{
						toast('请重新检查数据')	
				}
				console.log(this.formData)
			}
		}
	}
</script>

<style lang="scss" scoped>
.new_page {
		width: 100%;
		padding-top: 30rpx;
		margin: auto;
		padding-bottom: 50rpx;
		.main {
			padding: 0 30rpx 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
		}
		.form_wrap {
			width: 100%;
			margin-top: 40rpx;
			.div_box {
				padding: 20rpx 0;
				border-bottom: 1px solid #E5E5E5;
				/deep/.uni-forms-item__content {
					font-size: 29rpx;
					input {
						text-align: right;
					}
				}
				/deep/.uni-forms-item__label {
					font-size: 29rpx !important;
				}
				.avatar_wrap {
					display: flex;
					justify-content: flex-end;
					.avatar {
						width: 60rpx;
						border-radius: 50%;
						overflow: hidden;
					}
				}
			}
			.uni-forms-item {
				margin-bottom: 0;
			}
		}
}
.fix_btn {
  // position: fixed;
  width: 90%;
  left: 0;
  right: 0;
  margin: auto;
	margin-top: 50rpx;
  bottom: 40rpx;
}
</style>
